<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
.root1, .root2 { max-height: 200px }
.root3 { max-height: 100px }
#root span { max-height: inherit }
</style>
<div id="root" class="root1">
    <span></span>
</div>
<script>
description("Explicit inheritance of non-inherited property. Test that the explicitInherit flag in ComputedStyle is maintained correctly.");

root.offsetTop; // force recalc
root.className = "root2";

// No inheritance neede but explicitlInheritance needs to be set.
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");

root.offsetTop; // force recalc
root.className = "root3";

if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");

shouldBeEqualToString("getComputedStyle(root.querySelector('span')).maxHeight", "100px");
</script>
